<template>
  <!-- 个人信息页面 -->
  <div>
    <el-row class="Personal_Information">
      <el-col :span="15">
        <div class="Information_main">
          <el-row class="Information_main_header">
            <el-col :span="12">
              <div class="person">基本资料</div>
            </el-col>
            <el-col :span="12">
              <div class="Information_main_more" @click="more">查看更多</div>
            </el-col>
          </el-row>
          <div class="user_information">
            <el-row>
              <el-col :span="12">
                <el-form>
                  <el-form-item label="姓名：">
                    <span>{{userinfo.name}}</span>
                  </el-form-item>
                  <el-form-item label="性别：">
                    <span>{{userinfo.gender}}</span>
                  </el-form-item>
                  <el-form-item label="出生年月：">
                    <span>{{userinfo.birth}}</span>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12">
                <el-form>
                  <el-form-item label="党员发展阶段：">
                    <span>{{userinfo.politics}}</span>
                  </el-form-item>
                  <el-form-item label="民族：">
                    <span>{{userinfo.nationality}}</span>
                  </el-form-item>
                  <el-form-item label="籍贯：">
                    <span>{{userinfo.censusAddress}}</span>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="9">
        <div class="affiliate">
          <el-row class="affiliate_main_header">
            <el-col :span="12">
              <div class="person">我的家庭成员信息</div>
            </el-col>
            <el-col :span="12">
              <div class="Information_main_more" @click="affiliatemore">查看更多</div>
            </el-col>
          </el-row>
          <div class="family_infomation">
            <el-row>
              <el-col :span="12">
                <el-form>
                  <el-form-item label="与本人关系：">
                    <span>{{fatherinfo.role}}</span>
                  </el-form-item>
                  <el-form-item label="职业：">
                    <span>{{fatherinfo.job}}</span>
                  </el-form-item>
                  <el-form-item label="联系电话：">
                    <span>{{fatherinfo.contactWay}}</span>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12">
                <el-form>
                  <el-form-item label="姓名：">
                    <span>{{fatherinfo.name}}</span>
                  </el-form-item>
                  <el-form-item label="政治面貌：">
                    <span>{{fatherinfo.politics}}</span>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="Personal_Information_tow">
      <el-col :span="8">
        <div class="paymanage">
          <el-row class="affiliate_main_header">
            <el-col :span="12">
              <div class="person">我的简历</div>
            </el-col>
            <el-col :span="12">
              <div class="Information_main_more" @click="notesmore">查看更多</div>
            </el-col>
          </el-row>
          <div class="notertion">
            <el-row>
              <el-col :span="12">
                <el-form>
                  <el-form-item label="开始年份：">
                    <span>{{notertioninfo.startParty}}</span>
                  </el-form-item>
                  <el-form-item label="地址：">
                    <span class="exceed_father">
                      <span class="exceed">{{notertioninfo.address}}</span>
                    </span>
                    <!-- <span>{{notertioninfo.address}}</span> -->
                  </el-form-item>
                  <el-form-item label="阶段：">
                    <span class="exceed_father">
                      <span class="exceed">{{notertioninfo.stage}}</span>
                    </span>
                    <!-- <span>{{notertioninfo.stage}}</span> -->
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12">
                <el-form>
                  <el-form-item label="结束年份：">
                    <!-- <span class="exceed_father">
                      <span class="exceed">{{notertioninfo.endParty}}</span>
                    </span> -->
                    <span>{{notertioninfo.endParty}}</span>
                  </el-form-item>
                  <el-form-item label="学校：">
                    <span class="exceed_father">
                      <span class="exceed">{{notertioninfo.schoolName}}</span>
                    </span>
                    <!-- <span>{{notertioninfo.schoolName}}</span> -->
                  </el-form-item>
                  <el-form-item label="证明人：">
                    <span class="exceed_father">
                      <span class="exceed">{{notertioninfo.certifier}}</span>
                    </span>
                    <!-- <span>{{notertioninfo.certifier}}</span> -->
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="paymanage">
          <el-row class="affiliate_main_header">
            <el-col :span="12">
              <div class="person">我的奖项信息</div>
            </el-col>
            <el-col :span="12">
              <div class="Information_main_more" @click="activemore">查看更多</div>
            </el-col>
          </el-row>
          <div class="person_information">
            <el-row>
              <el-col :span="12">
                <el-form>
                  <el-form-item label="竞赛全称：">
                    <span class="exceed_father">
                      <span class="exceed">{{competitioninfo.contestName}}</span>
                    </span>
                  </el-form-item>
                  <el-form-item label="获奖时间：">
                    <span class="exceed_father">
                      <span class="exceed">{{competitioninfo.acquisitionTime}}</span>
                    </span>
                    <!-- <span>{{competitioninfo.acquisitionTime}}</span> -->
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12">
                <el-form>
                  <el-form-item label="获奖等级：">
                    <span class="exceed_father">
                      <span class="exceed">{{competitioninfo.grade}}</span>
                    </span>
                    <!-- <span>{{competitioninfo.grade}}</span> -->
                  </el-form-item>
                  <el-form-item label="奖项级别：">
                    <span class="exceed_father">
                      <span class="exceed">{{competitioninfo.level}}</span>
                    </span>
                    <!-- <span>{{competitioninfo.level}}</span> -->
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="paymanage_three">
          <el-row class="affiliate_main_header">
            <el-col :span="12">
              <div class="person">我的组织关系转接历史</div>
            </el-col>
            <el-col :span="12">
              <div class="Information_main_more" @click="historymore">查看更多</div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <userDetail
      @personinfo="personinfo"
      ref="addDetil"
      v-if="showdetailed"
      :userId="userkey"
      @toclose="cancel(detail)"
    ></userDetail>
  </div>
</template>

<script>
// import axios from "axios"
import userDetail from "./user_detailed.vue";
import transfer from '../../../assets/js/transfer.js';
export default {
  components: {
    userDetail
  },
  data() {
    return {
      userinfo: {
        name:"待完善",//姓名
        gender:"待完善",//性别
        birth:"待完善",//出生日期
        politics:"待完善",//政治面貌
        nationality:"待完善",//民族
        censusAddress:"待完善",//籍贯
      },
      showdetailed: false,
      userkey: "", //当前用户id
      userToken: 1, //用户点击弹框状态--0:不能修改信息；1：能修改信息
      familyMembers: [], //家庭成员信息
      fatherinfo: {
        role: "待完善", //与本人关系
        job: "待完善", //职业
        name: "待完善", //姓名
        politics: "待完善", //政治面貌
        contactWay: "待完善" //联系电话
      },
      competiMembers: [], //个人获奖
      competitioninfo: {
        contestName: "无", //比赛全称
        level: "无", //奖项级别
        grade: "无", //奖项等级
        acquisitionTime: "无" //获取时间
      },
      noterMembers: [], //个人简历信息
      notertioninfo: {//个人简历
        stage: "待完善", //阶段
        startParty: "待完善", //开始年份
        endParty: "待完善", //结束年份
        schoolName: "待完善", //学校
        certifier: "待完善", //证明人
        address: "待完善" //地址
      }
    };
  },
  mounted() {
    // this.personinfo();
    this.competition_active(); //个人获奖
    // this.myNotes();//个人简历
    transfer.$on('personinfo',()=> {
      this.personinfo();
    });
  },
  methods: {
    personinfo() {
      // console.log("调用啦")
      //当前用户信息
      this.axios({
        headers: { Authentication: localStorage.getItem("token") },
        method: "get",
        // url: "api/user/getCurrentUserInfo",
        url: "/user/getCurrentUserInfo",
        data: ""
      }).then(res => {
        // console.log(res)
        if (res.data.code != 20001) {
          return this.$message.error(res.data.msg);
        }

        // var str = "2019-00-00 00:00:00";
        // var newStr = str.replace(/(\d{4}-\d{2}-\d{2})\s\d{2}:\d{2}:\d{2}/, "$1");
        // console.log(newStr); // 输出： 2019-00-00
        this.userinfo = res.data.data;
        // console.log(this.userinfo.birth)
        this.userinfo.birth = this.userinfo.birth.replace(/(\d{4}-\d{2}-\d{2})\s\d{2}:\d{2}:\d{2}/, "$1")
        this.userkey = res.data.data.id;
        // console.log(this.userinfo)
      });
      this.myNotes(); //我的简历
      this.familyfamtion(); //我的家庭成员信息
      this.competition_active(); //个人奖项
    },
    more() {
      //用户基本资料查看更多
      this.showdetailed = true;
      // console.log(this.userkey,this.userToken)
      this.$nextTick(() => {
        this.$refs.addDetil.init(this.userToken, this.userkey);
      });
      // console.log("查看更多")
    },
    affiliatemore() {
      //家庭成员信息查看更多
      this.$router.replace({ name: "myinfo-familymember" });
    },
    notesmore() {
      //点击我的简历查看更多
      // console.log("我的简历查看更多");
      this.$router.replace({ name: "myinfo-notes" });
    },
    activemore() {
      //点击查看更多我的奖项
      this.$router.replace({ name: "myinfo-awards" });
    },
    historymore() {
      //点击查看更多我的组织关系转接历史
      this.$router.replace({ name: "myinfo-TransferHistory" });
    },
    // myNotes() {
    //   //查看我的简历
    //   this.axios({
    //     headers: { Authentication: localStorage.getItem("token") },
    //     method: "post",
    //     url: "api/resume/getUserResumeList"
    //   }).then(res => {
    //     if (res.data.code != 20001) {
    //       return this.$message.error(res.data.msg);
    //     }
    //     // console.log(res)
    //   });
    // },
    familyfamtion() {
      //家庭成员信息
      this.axios({
        headers: { Authentication: localStorage.getItem("token") },
        method: "post",
        // url: "api/homeInfo/getUserHomeInfoList",
        url: "/homeInfo/getUserHomeInfoList",
      }).then(res => {
        // console.log(res);
        if (res.data.code != 20001) {
          return this.$message.error(res.data.msg);
        }
        this.familyMembers = res.data.data;
        if (this.familyMembers.length != 0) {
          this.fatherinfo.role = this.familyMembers[0].role;
          this.fatherinfo.job = this.familyMembers[0].job;
          this.fatherinfo.name = this.familyMembers[0].name;
          this.fatherinfo.politics = this.familyMembers[0].politics;
          this.fatherinfo.contactWay = this.familyMembers[0].contactWay;
        }
      });
    },
    competition_active() {
      // console.log("我的奖项")
      //获取我的奖项列表
      this.axios({
        headers: { Authentication: localStorage.getItem("token") },
        method: "get",
        // url: "api/award/getAwardList",
        url: "/award/getAwardList",
      }).then(res => {
        // console.log(res);
        if (res.data.code != 20001) {
          return this.$message.error(res.data.msg);
        }
        // console.log(res)
        this.competiMembers = res.data.data.list;
        if (this.competiMembers.length != 0) {
          this.competitioninfo.contestName = this.competiMembers[0].contestName;
          this.competitioninfo.level = this.competiMembers[0].level;
          this.competitioninfo.grade = this.competiMembers[0].grade;
          this.competitioninfo.acquisitionTime = this.competiMembers[0].acquisitionTime.replace(/(\d{4}-\d{2}-\d{2})\s\d{2}:\d{2}:\d{2}/, "$1");
          // console.log(this.competitioninfo.level);
        }
      });
    },
   myNotes() {
      this.axios({
        headers: { Authentication: localStorage.getItem("token") },
        method: "post",
        // url: "api/resume/getUserResumeList",
        url: "/resume/getUserResumeList"
      }).then(res => {
        // console.log(res);
        if (res.data.code != 20001) {
          return this.$message.error(res.data.msg);
        }
        this.noterMembers = res.data.data;
        // console.log(this.noterMembers[res.length-1])
        // list.item !==undefined && list.item .length>0
        // console.log(this.notertioninfo)
        if (this.noterMembers.length != 0) {
          this.notertioninfo.stage = this.noterMembers[this.noterMembers.length-1].stage;
          this.notertioninfo.startParty = this.noterMembers[this.noterMembers.length-1].startParty;
          this.notertioninfo.endParty = this.noterMembers[this.noterMembers.length-1].endParty;
          this.notertioninfo.schoolName = this.noterMembers[this.noterMembers.length-1].schoolName;
          this.notertioninfo.certifier = this.noterMembers[this.noterMembers.length-1].certifier;
          this.notertioninfo.address = this.noterMembers[this.noterMembers.length-1].address;
          // console.log(this.competitioninfo.level);
        }
      });
    }
  }
};
</script>

<style lang="scss">
.Personal_Information {
  margin-top: 2vh;
  .Information_main {
    width: 90%;
    height: 33vh;
    background-color: #fff;
    .Information_main_header {
      padding: 9px;
      border-bottom: 1px solid #ccc;
      .person {
        color: red;
      }
      .Information_main_more {
        text-align: right;
        cursor: pointer;
      }
    }
    .user_information {
      padding: 9px;
    }
  }
  .affiliate {
    background-color: #fff;
    height: 33vh;
    .affiliate_main_header {
      padding: 9px;
      border-bottom: 1px solid #ccc;
      .person {
        color: red;
      }
      .Information_main_more {
        text-align: right;
        cursor: pointer;
      }
    }
    .user_information {
      padding: 9px;
    }
    .family_infomation {
      padding: 9px;
      // margin-left: 3vw;
      // margin-top: 4vh;
    }
  }
}
.exceed_father{
  // border: 1px solid #f00;
  .exceed{
    display: inline-block;
    // border: 1px solid #000;
    overflow:hidden;
    width: 100px;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow:ellipsis;
  }
}
.Personal_Information_tow {
  margin-top: 10vh;
  .paymanage {
    height: 30vh;
    width: 95%;
    background: #fff;
    .affiliate_main_header {
      padding: 9px;
      border-bottom: 1px solid #ccc;
      .person {
        color: red;
      }
      .Information_main_more {
        text-align: right;
        cursor: pointer;
      }
    }
    .user_information {
      padding: 9px;
    }
    .person_information {
      padding: 9px;
    }
    .notertion {
      padding: 9px;
    }
  }
  .paymanage_three {
    height: 30vh;
    background: #fff;
    .affiliate_main_header {
      padding: 9px;
      border-bottom: 1px solid #ccc;
      .person {
        color: red;
      }
      .Information_main_more {
        text-align: right;
        cursor: pointer;
      }
    }
    .user_information {
      padding: 9px;
    }
  }
}
.Information_main_more:hover{
  color: coral;
}
</style>